<template>
  <div>
    <el-popover v-model="visible" placement="top" width="160">
      <p>
        {{
          type === 0
            ? '确定再次关注' + item.name + '吗？'
            : '确定不再关注' + item.name + '吗？'
        }}
      </p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false"
          >取消</el-button
        >
        <el-button type="primary" size="mini" @click="handleAttention"
          >确定</el-button
        >
      </div>
      <el-button v-if="type === 1" slot="reference" size="mini">
        <i class="el-icon-check el-icon--left"></i>已关注
      </el-button>
      <el-button v-if="type === 2" slot="reference" size="mini">
        <i class="el-icon-refresh el-icon--left"></i>互相关注
      </el-button>
      <el-button v-if="type === 0" slot="reference" size="mini">
        <i class="el-icon-plus el-icon--left"></i>关注
      </el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    page: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      cancel: false,
      attention: false
    }
  },
  computed: {
    type() {
      if (this.page === 'fans') {
        return this.item.attention ? 2 : 0
      } else {
        return this.cancel ? 0 : this.item.attention ? 2 : 1
      }
    }
  },
  methods: {
    async handleAttention() {
      const self = this
      const op = this.type === 0 ? '1' : '-1'
      const { status, data } = await this.$axios.post('user/attention', {
        id: self.item.id,
        op
      })
      if (status === 200) {
        if (data.code === 0) {
          this.$message({
            message: op === '-1' ? '取消关注成功' : '关注成功',
            type: 'success'
          })
          if (op === '-1') {
            if (this.page === 'fans') {
              this.item.attention = false
            }
            this.cancel = true
          } else {
            if (this.page === 'fans') {
              this.item.attention = true
            }
            this.cancel = false
          }
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      }
      this.visible = false
    }
  }
}
</script>

<style></style>
